<script setup lang="ts"></script>
<template>
<div class="login">
    <div class="box">
        <!-- 左侧 -->
        <div class="l">
            <!-- 二维码 -->
            <div class="code" @click="showCode=true">
                <img src="@/assets/code.png" alt class="img" />
                <p class="tip">微信快速登录</p>
                <div class="mask"></div>
            </div>
            <!-- 选项卡 -->
            <div class="tabs" id="tabs">
                <li v-for="(tab,index) in tabs" :key="index" @click="current=index" class="tab" :class="{active:current==index}">{{tab.title}}</li>
            </div>
            <!-- tab0  -->
            <div class="tabCon" v-if="current==0">
                <LoginPwd></LoginPwd>
            </div>
            <!-- tab1  -->
            <div class="tabCon" v-if="current==1">
              <LoginCode></LoginCode>
            </div>
            <!-- 二维码登录 -->
            <div class="codeLogin" v-show="showCode">
                <p class="txt">扫描二维码进行登录</p>
                <div class="codeLogin_code">
                    <img src="@/assets/code.png" alt class="img" />
                </div>
                <p class="txt back" @click="showCode=false">返回</p>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="r">
            <p class="txt txt1">还没有账号:</p>
            <p class="reg">
                立即注册
                <img src="@/assets/arrow-r.svg" alt class="img" />
            </p>
            <p class="txt txt2">使用以下账号直接登录:</p>
            <div class="icons">
                <span class="icon">
                    <img src="@/assets/sina.png" alt class="img" />
                </span>
                <span class="icon">
                    <img src="@/assets/wechat.png" alt class="img" />
                </span>
                <span class="icon">
                    <img src="@/assets/qq.png" alt class="img" />
                </span>
                <span class="icon">
                    <img src="@/assets/baidu.png" alt class="img" />
                </span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import LoginPwd from './pwd.vue'
import LoginCode from './code.vue'
export default {
  components:{
    LoginPwd,
    LoginCode,
  },
  data() {
    return {
      tabs: [
        {
          title: "密码登录"
        },
        {
          title: "验证码登录"
        }
      ],
      current: 0,
      showCode: false,
    };
  },
};
</script>

<style lang="less" scoped>
.login {
    min-height: 100vh;
    background-color: rgba(246, 246, 250, 1);
    display: flex;
    justify-content: center;
    padding: 50px;

    .box {
        width: 700px;
        height: 468px;
        background-color: #fff;
        display: flex;

        .txt {
            color: rgba(80, 80, 80, 1);
            font-size: 14px;
        }

        .l {
            width: 420px;
            padding: 60px;
            position: relative;

            // 二维码
            .code {
                position: absolute;
                left: 8px;
                top: 8px;

                .img {
                    @wh: 72px;
                    width: @wh;
                    height: @wh;
                    cursor: pointer;
                }

                .tip {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 76px;
                    width: 88px;
                    height: 24px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: rgba(166, 166, 166, 1);
                    background-color: rgba(255, 255, 255, 1);
                    border-radius: 2px;
                    font-size: 12px;
                    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.15);
                }

                // 三角遮罩
                .mask {
                    @bor-c: #fff;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 0;
                    height: 0;
                    border-width: 36px;
                    border-top-color: transparent;
                    border-left-color: transparent;
                    border-right-color: @bor-c;
                    border-bottom-color: @bor-c;
                }
            }

            // 二维码登录
            .codeLogin {
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                position: absolute;
                background: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .txt {
                    margin-bottom: 10px;
                }

                .back {
                    cursor: pointer;
                    margin-top: 20px;
                }

                &_code {
                    background-color: #fff;
                    box-sizing: border-box;

                    .img {
                        width: 150px;
                    }
                }
            }
        }

        .r {
            position: relative;
            width: 100%;
            padding: 160px 50px;

            &::before {
                content: "";
                display: block;
                height: 300px;
                width: 1px;
                position: absolute;
                background-color: rgba(229, 229, 229, 1);
                top: 76px;
                left: 0;
            }

            .txt {
                color: rgba(80, 80, 80, 1);
                font-size: 14px;

                &.txt1 {
                    margin-bottom: 10px;
                }

                &.txt2 {
                    margin-bottom: 12px;
                }
            }

            // 注册
            .reg {
                font-size: 16px;
                color: rgba(42, 130, 228, 1);
                margin-bottom: 48px;
                display: flex;
                cursor: pointer;

                .img {
                    width: 20px;
                    margin-left: 10px;
                }
            }

            // 登录icon
            .icons {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-right: 40px;

                .icon {
                    @wh: 20px;
                    width: @wh;
                    height: @wh;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    filter: saturate(0) hue-rotate(0deg) brightness(1) contrast(1);

                    .img {
                        max-width: 100%;
                        max-width: 100%;
                    }

                    &:nth-child(2) {
                        width: 24px;
                    }

                    &:nth-child(3) {
                        width: 18px;
                    }
                }
            }
        }

        .tabs {
            display: flex;

            .tab {
                cursor: pointer;
                width: 150px;
                font-size: 16px;
                text-align: center;
                padding-bottom: 10px;
                padding-top: 10px;
                border-bottom: 1px solid rgba(229, 229, 229, 1);

                &.active {
                    border-color: rgba(42, 130, 228, 1);
                    border-bottom-width: 2px;
                    color: rgba(42, 130, 228, 1);
                }
            }
        }
        .tabCon{
            padding-top: 40px;
        }
    }
}
</style>
